<template>
  <div class="detail">
    <Header title="订单详情"></Header>

    <div class="orderItemList">
      <div
        class="orderItemBox"
        v-for="(orderItem, orderItemIndex) in orderData.orderItemsForFront"
        :key="orderItemIndex"
      >
        <OrderItem
          :showRefundStatusName="true"
          :showApplyReturnBtn="true && orderData.orderItemsForFront.length > 1"
          :showReturnDeliveryBtn="true"
          :orderItem="orderItem"
          @returnDelivery="openReturnDeliveryDialog"
        />
      </div>
    </div>

    <!-- 退货发货弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.returnDeliveryDialog"
      title="退货发货"
    >
      <div class="orderInfoBox">
        <OrderInfoItem
          :hideStatus="true"
          :order="filterReturnDeliveryOrderData"
        />
        <nut-button type="primary" @click="returnDelivery">确认发货</nut-button>
      </div>
    </nut-action-sheet>

    <!-- 确认收货弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.takeDeliveryDialog"
      title="确认收货"
    >
      <div class="orderInfoBox">
        <OrderInfoItem :order="orderData" />
        <nut-button type="primary" @click="takeDelivery">确认收货</nut-button>
      </div>
    </nut-action-sheet>

    <!-- 去支付弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.payOrderDialog"
      title="支付订单"
    >
      <div class="orderInfoBox">
        <OrderInfoItem :order="orderData" />
        <PaySelect
          @pay="payOrder"
          :confirmData="orderData"
          :loading="loadingStatus.pay"
        />
      </div>
    </nut-action-sheet>

    <div class="operateBtnList">
      <nut-button
        v-if="orderData.operateBtn.showApplyRefundBtn"
        type="default"
        @click="
          $router.push({
            path: '/order/refund',
            query: { orderId: orderData.id },
          })
        "
        >申请退款</nut-button
      >
      <nut-button
        v-if="orderData.operateBtn.showApplyReturnBtn"
        type="default"
        @click="
          $router.push({
            path: '/order/return',
            query: { orderId: orderData.id },
          })
        "
        >申请售后</nut-button
      >
      <nut-button
        v-if="orderData.operateBtn.showReturnDeliveryBtn"
        type="default"
        @click="
          $router.push({
            path: '/order/return/delivery',
            query: { orderId: orderItem.orderId },
          })
        "
        >去发货</nut-button
      >
      <nut-button
        v-if="orderData.operateBtn.showTakeDeliveryBtn"
        type="default"
        @click="visibleStatus.takeDeliveryDialog = true"
        >确认收货</nut-button
      >
      <nut-button
        v-if="orderData.operateBtn.showPayBtn"
        type="default"
        @click="visibleStatus.payOrderDialog = true"
        >去支付</nut-button
      >
    </div>

    <div class="orderAmountInfo">
      <nut-cell title="实付金额">
        <template #desc>
          <nut-price
            :price="orderData.payAmount"
            size="normal"
            position="after"
            symbol="元"
          />
        </template>
      </nut-cell>
      <nut-cell title="订单编号" :desc="String(orderData.orderSn)"></nut-cell>
      <nut-cell
        v-if="orderData.payType != null"
        title="支付方式"
        :desc="orderData.payTypeName"
      ></nut-cell>
      <nut-cell
        v-if="orderData.payType != null"
        title="支付时间"
        :desc="orderData.payTime"
      ></nut-cell>
      <nut-cell title="下单时间" :desc="orderData.createTime"></nut-cell>
    </div>

    <div class="address">
      <nut-cell title="收件人" :desc="orderData.delivery.name"></nut-cell>
      <nut-cell title="收件电话" :desc="orderData.delivery.phone"></nut-cell>
      <nut-cell
        title="收件地址"
        :desc="orderData.delivery.fullAddress"
      ></nut-cell>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  computed,
  watch,
} from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();

import OrderInfoItem from "@/views/order/list/components/OrderInfoItem.vue";
import PaySelect from "@/views/order/confirm/components/PaySelect.vue";

// 按钮状态管理
const loadingStatus = reactive({
  pay: false,
});

// 显示状态
const visibleStatus = reactive({
  returnDeliveryDialog: false,
  takeDeliveryDialog: false,
  payOrderDialog: false,
});

// 订单信息
const orderData = reactive({
  delivery: {},
  orderItems: [],
  operateBtn: {},
});

// 重复提交token
const repeatSubmitToken = ref(null);
const getRepeatSubmitToken = () => {
  proxy.$thirdApi.common
    .repeatSubmitToken()
    .then((res) => {
      repeatSubmitToken.value = res.data;
    })
    .catch((error) => {});
};


// 退货发货
const returnDeliveryOrderItemId = ref(null);
const filterReturnDeliveryOrderData = ref({});

watch(returnDeliveryOrderItemId, (newValue, oldValue) => {
  var orderItems = [];
  var result = JSON.parse(JSON.stringify(orderData));
  result.orderItems.forEach((orderItem) => {
    if (null == newValue || newValue == orderItem.id) {
      orderItems.push(orderItem);
    }
  });
  result.orderItems = orderItems;
  filterReturnDeliveryOrderData.value = result;
});

const openReturnDeliveryDialog = (orderItem) => {
  visibleStatus.returnDeliveryDialog = true;
  returnDeliveryOrderItemId.value = orderItem.id;
};
const returnDelivery = () => {
  proxy.$orderApi.refund
    .returnDelivery({
      orderId: filterReturnDeliveryOrderData.value.id,
      orderItemId: returnDeliveryOrderItemId.value,
      repeatSubmitToken: repeatSubmitToken.value,
    })
    .then((res) => {
      visibleStatus.returnDeliveryDialog = false;
      remoteData();
    });
};

// 确认收货
const takeDelivery = () => {
  proxy.$orderApi.order.takeDelivery(orderData.id).then((res) => {
    visibleStatus.takeDeliveryDialog = false;
    remoteData();
  });
};

// 支付
const payOrder = (type) => {
  if (type == "2") {
    proxy.$orderApi.order
      .aliMobileWapPay(
        orderData.id,
        encodeURIComponent(
          "http://" + window.location.host + "/#/order/pay/success"
        )
      )
      .then((res) => {
        document.write(res.data);
      })
      .catch((error) => {});
  } else {
    proxy.$showToast.fail("该支付方式正在对接中");
  }
};

// 请求数据
const remoteData = () => {
  proxy.$orderApi.order.info(route.query.orderId).then((res) => {
    Object.assign(orderData, res.data);
    getRepeatSubmitToken();
  });
};

// 页面加载完毕
onMounted(() => {
  remoteData();
});
</script>

<style lang="less" scoped>
.detail {
  border-radius: 5px;
  margin: 5px 5px 0px 5px;
  padding: 20px 10px 05px 10px;
  background: #fff;
  .orderInfoBox {
    padding: 10px 15px;
    .nut-button {
      width: 100%;
      margin: 20px 0px;
      border-radius: 10px;
      height: 40px;
    }
  }
  .orderItemList {
    .orderItemBox {
      margin-bottom: 15px;
    }
    .orderItemBox:last-child {
      margin-bottom: 0px;
    }
  }
  .operateBtnList {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px 20px 0px;
    .nut-button {
      margin-top: 10px;
      height: 30px;
      font-size: 12px;
      padding: 15px 15px;
      color: #000;
      margin-right: 10px;
    }
    .nut-button:last-child {
      margin-right: 0px;
    }
  }
  .orderAmountInfo,
  .address {
    border-top: 1px solid #efefef;
    margin-top: 15px;
    :deep(.nut-cell) {
      box-shadow: none;
      padding: 2px 0px;
      font-size: 13px;
      .nut-cell__value {
        font-size: 13px;
        color: #000;
      }
    }
  }
}
</style>